<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #lunbo{
            width: 700px;
            height: 300px;
            margin: 20px auto;
            position: relative;
        }
        #lunbo img{
            width: 700px;
            height: 300px;
        }
        #lunbo .btn{
            height: 14px;
            width: 100%;
            position: absolute;
            bottom: 10px;
            display: flex;
            justify-content: center;
        }
        #lunbo .btn li{
            width: 14px;
            height: 14px;
            background-color: #eeeeee;
            border-radius: 50%;
            cursor: pointer;
            margin: 0 5px;
        }
        #lunbo .btn li.active{
            background-color: darkred;
        }
        .left{
            width: 37px;
            height: 100%;
            position:absolute;
            top: 0;
            left: 10px;
            display: flex;
            align-items: center;
        }
        .left .left_arrow{
            width: 37px;
            height: 63px;
            background: url(./img/arrow.png) no-repeat;
            cursor: pointer;
        }
        .right{
            width: 37px;
            height: 100%;
            position:absolute;
            top: 0;
            right: 10px;
            display: flex;
            align-items: center;
        }
        .right .right_arrow{
            width: 37px;
            height: 63px;
            background: url(./img/arrow.png) no-repeat;
            transform: rotate(180deg);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="lunbo">
        <div class="left">
            <div class="left_arrow"></div>
        </div>
        <div class="right">
            <div class="right_arrow"></div>
        </div>
        <img class="img" src="http://p1.music.126.net/HSw46_zcjp6O31SzVDF9zA==/109951165563500774.jpg?imageView&quality=89">
        <ul class="btn">
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //定义图片数组
        let imgs = ["http://p1.music.126.net/HSw46_zcjp6O31SzVDF9zA==/109951165563500774.jpg?imageView&quality=89",
                    "http://p1.music.126.net/MIsJHiR1mpwi7ZO5UVPz9A==/109951165562782465.jpg?imageView&quality=89",
                    "http://p1.music.126.net/2rRPVWGY4htKlmYMeUq__A==/109951165562807332.jpg?imageView&quality=89",
                    "http://p1.music.126.net/TstMKAoMGu1LSHmWABBCaQ==/109951165562748206.jpg?imageView&quality=89",
                    "http://p1.music.126.net/TN69uFUqpOX521FY0DNraQ==/109951165562752291.jpg?imageView&quality=89"]
        let i = 0 //用于表示当前显示的下标

        //生成li按钮
        for(let i=0;i<imgs.length;i++){
            let li = $('<li/>')
            if(i===0){
                li.addClass('active')
            }
            $('.btn').append(li)
        }

        //li按钮点击事件
        $('.btn li').click(function(){
            //先清空定时器
            clearInterval(timer)  
            //将当前li的位置值，赋给i
            i = $(this).index()
            change()  //调用切换方法
            //再开启定时器
            run()       
        })

        //左箭头点击事件
        $('.left_arrow').click(function(){
            //先清空定时器
            clearInterval(timer)  
            //i减1，要判断i不能小于0
            if(--i<0) i = imgs.length-1
            change()  //调用切换方法
            //再开启定时器
            run()       
        })
        
        //右箭头点击事件
        $('.right_arrow').click(function(){
            //先清空定时器
            clearInterval(timer)  
            //i加1，要判断i不能大于数组的长度
            if(++i>=imgs.length) i = 0
            change()  //调用切换方法
            //再开启定时器
            run()       
        })

        //切换方法
        function change(){
            //切换图片
            $('.img').attr('src',imgs[i])
            //切换按钮样式
            $('.btn li').eq(i).addClass('active').siblings('.active').removeClass('active')
        }

        let timer = null  //定义一个变量，用于接收定时器
        //开启定时器的方法
        function run(){
            timer = setInterval(() => {
                //i每次加1，如果i的值超过了数组的长度，从0开始
                if(++i>=imgs.length) i = 0
                change()  //调用切换方法
            }, 3000);
        }
        run()  //开启定时器
    </script>
</body>
</html>